<template>
     <el-date-picker
      :style="styles"
      v-model="currentValue"
      :id="id"
      type="daterange"
      :class="classs"
      value-format="yyyy-MM-dd"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
   
</template>
 
<script>
    export default {
        props:['id','styles','value','data','index','isBorder','extype','exkey'],
        name: "input-date-select",
        data(){
            return {
                currentValue:this.value,
                classs:'',
                pId:"",
                cId:""
            }
        },
        created(){
            if(this.isBorder=='N')
                this.classs="no-border";
            if(!this.value){
                let ids=this.id.split(".");
                if(ids.length>1){
                    let p=ids[0];
                    let id_=ids[1];
                    this.pId=p;
                    this.cId=id_;
                    if(this.index||this.index=='0'){
                        try{
                            this.currentValue=unescape(this.data[p][this.index][id_]).split(",");
                        }catch(e){}
                    }else{
                        try{
                            this.currentValue=unescape(this.data[p][id_]).split(",");
                        }catch(e){}
                    }
                }else{
                    this.currentValue=unescape(this.data[this.id]).split(",");
                }
                if(!this.style){
                    this.style="width:180px"
                }
            }else{
                
                let data={};
                data.id=this.id;
                data.val=this.value;
                data.index=this.index;
                this.$emit('input',JSON.stringify(data)).split(",");
            }
            
            
        },
        methods:{
            getDaysBetween(dateString1,dateString2){
                var  startDate = Date.parse(dateString1);
                var  endDate = Date.parse(dateString2);
                var days=(endDate - startDate)/(1*24*60*60*1000);
                // alert(days);
                return  days;
                }
        },
        watch:{
            currentValue: function (val) { //currentValue值变动就向父组件传值
                
                let val1=val[0];
                let val2=val[1];
                if(val2!=undefined&&val2!="undefined"){
                    let extypes=this.extype.split("#");
                    let data={};
                    data.id=extypes[0];
                    data.val=val1;
                    data.index=this.index;
                    this.$emit('input',JSON.stringify(data));
                    this.$emit('on-change',JSON.stringify(data));

                    
                    
                    let data2={};
                    data2.id=extypes[1];
                    data2.val=val2;
                    data2.index=this.index;
                    this.$emit('input',JSON.stringify(data2));
                    this.$emit('on-change',JSON.stringify(data2));

                    let day=this.getDaysBetween(val1,val2)+1;
                    
                    let data3={};
                    data3.id=this.exkey;
                    data3.val=day;
                    data3.index=this.index;
                    this.$emit('input',JSON.stringify(data3));
                    this.$emit('on-change',JSON.stringify(data3));
                    console.log(data3);
                }
                
            },
            value:function (val) { //对值进行验证0
                
            }
        }
    }
</script>
<style scoped>
.formitem{
    margin-left:35px;
}
.formitem2{
    margin-left:10px;
}
</style>